<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-21 22:26:47
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-22 21:54:19
 * @FilePath: \shangyitong\src\pages\hospital\detail\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div class="detail">
		<!-- 医院的名字与医院等级结构 -->
		<div class="top">
			<div class="name">
				{{ hospitalDetailStore.hospitalDetail.hospital?.hosname }}
			</div>
			<div class="level">
				<span class="iconfont icon-icon"></span>
				<span>{{
					hospitalDetailStore.hospitalDetail.hospital?.param
						.hostypeString
				}}</span>
			</div>
		</div>
		<!-- 医院的logo或如路线 -->
		<div class="logo">
			<div class="left">
				<img
					:src="`data:image/jpeg;base64,${hospitalDetailStore.hospitalDetail.hospital?.logoData}`"
					alt=""
				/>
			</div>
			<div class="right">
				<div class="address">
					<i class="iconfont icon-Location"></i>
					<p>具体位置:{{hospitalDetailStore.hospitalDetail.hospital?.param.fullAddress  }}</p>
				</div>
				<div class="route">规划路线:{{ hospitalDetailStore.hospitalDetail.hospital?.route }}</div>
			</div>
		</div>
        <div class="footer">
            <h1>医院的介绍</h1>
            <p>{{ hospitalDetailStore.hospitalDetail.hospital?.intro ||"暂无医院数据"}}</p>
        </div>
	</div>
</template>

<script setup lang="ts">
import useDetailStore from '@/store/modules/hospitalDetail'
//引入医院的详情的数据仓库
let hospitalDetailStore = useDetailStore()
</script>

<style lang="scss" scoped>
.detail {
	.top {
		display: flex;
		align-items: center;
		.name {
			font-size: 30px;
			font-weight: 900;
		}
		.level {
			color: #7f7f7f;
			margin-left: 10px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			span {
				margin-left: 5px;
			}
		}
	}
    .logo{
        display: flex;
        .left {
			width: 80px;
			img {
				width: 80px;
				height: 80px;
                border-radius: 50%;
			}
		}
        .right {
			flex: 1;
            font-size: 14px;
            margin-left: 10px;
            color:#7f7f7f;
            .address{
                display: flex;
                align-items: center;
            }
            .route{
                line-height: 30px;
            }            
		}        
    }
    .footer{
            margin-top: 10px;
            p{
                color:#7f7f7f;
                line-height: 30px;
            }
        }
}
</style>
